<template>
    <div class="container">
      <i class="el-icon-minus" style="transform:rotate(90deg);position:absolute;z-index: 4;left:1500px;margin-top:-10px;"></i>
    <p>推荐阅读<a href="#">更多>>></a></p>
    <el-row :gutter="20">
  <el-col :span="18"><div class="grid-content">
    <ListItem :info1="infoobj" :img="img1"></ListItem>
    <ListItem :info1="infoobj" :img="img2"></ListItem>
  </div></el-col>
  <el-col :span="6"><div class="grid-content">
    <Liitem></Liitem>
  </div></el-col>
</el-row>
</div>
</template>
<script>
    import ListItem from "./listitem.vue"
    import Liitem from "./liitem.vue"
    export default{
        data(){
            return{
                infoobj:{
                info:"我是科学家Scientist",
                title:"带来毁灭，又给予重生。火山如何记录完整的地球故事？",
                article:"为什么火山是永恒的话题？它关子好奇心，重生与时间。"
            },
            img1:"first.png",
            img2:"pic2.png"
            }
        },
        components:{
    ListItem,
    Liitem,
    Liitem
}
    }
</script>
<style scoped>
.container {
    width:1440px;
    margin:20px auto;
    text-align: left;
    text-indent: 2em;
}
.container p{
  font-size:20px;
    font-weight:bold;
}
.container p a{
  font-size:20px;
    font-weight:normal;
    width:100px;
    margin-left:1200px;
    text-decoration: none;
}
.container p a:hover{
    color:orange;
}
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #f9fafc; */
  }
</style>
